<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>
<pre>
    <h3>
        点击按钮，按钮文字变成“正在加载....”这种效果，加载完成后又变成原来的状态
        按钮之间的状态切换
        模仿单选按钮或多选按钮
    </h3>
</pre>
<div class="container">

    <h4>按钮的加载状态(data-loading-text="加载内容")</h4>
    <button class="btn btn-primary" data-loading-text="正在加载...." id="btnLoading">确定</button>
    <h4>单选按钮</h4>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="radio" name="options">所有
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options">删除
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options">未删除
        </label>
    </div>
    <h4>多选按钮</h4>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" name="options">HTML
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options">CSS
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options">JavaScript
        </label>

    </div>
    <h4>方法</h4>
    <button id="btnLoading1" class="btn btn-primary active" data-complete-text="加载完成" data-loading-text="正在加载...">按钮</button>


</div>
</body>
<script>
    $(function(){
        $("#btnLoading").click(function(){
           $(this).button("loading");
        });
        $("#btnLoading1").click(function () {
            $(this).button("loading");

            setTimeout(function(){
                $("#btnLoading1").button("complete");
            },3000);
        });

    })
</script>
</html>